<template>
	<view>
	<!-- 	<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">正在考试</block>
		</cu-custom> -->
		<view bgColor="bg-gradual-blue">
			<view class="bg-white" style="text-align:center; font-size: 18px;">{{ examdata.exam.title }}</view>
		</view>
		<view bgColor="bg-gradual-blue">
			<view class="cu-bar bg-white">
				<view class="action">
						<text class="cuIcon-title text-red">错题答题卡显示红色</text>
				</view>
				<view class="center"><button class="cu-btn bg-yellow shadow"  data-target="modalCard">总得分:{{examdata.userpaper.fraction}}</button></view>
			</view>
		</view>
		<view id="top-box" class="cu-bar bg-white solid-bottom">
			<view class="action text-black">
				<text v-if="currentType === 4">判断题</text>
				<text v-else-if="currentType === 1">单选题</text>
				<text v-else-if="currentType === 2">多选题</text>
				<text v-else-if="currentType === 3">问答</text>
			</view>
			<view class="action"><button class="cu-btn bg-green shadow" @tap="showCardModal" data-target="modalCard">答题卡</button></view>
		</view>
		<view class="cu-modal" :class="modalCard == 'modalCard' ? 'show' : ''" @tap="hideCardModal">
			<view class="cu-dialog" @tap.stop>
				<scroll-view class="page padding" :scroll-y="true" :style="{ height: swiperHeight }">
					<view class="cu-bar solid-bottom">
						<view class="action">
							<text class="cuIcon-title text-red"></text>
							答题卡
						</view>
					</view>
					<view class="grid col-5 ">
						<view class="margin-tb-sm text-center" v-for="(subject, index) in subjectList" :key="index">
							<button class="cu-btn round" :class="[subject.upq.goal > 0 ? 'line-grey' : 'bg-red']" @click="AppointedSubject(index)">
								{{ index + 1 }}
							</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<form>
			<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" :style="{ height: swiperHeight }">
				<swiper-item v-for="(subject, index) in subjectList">
					<view v-if="index - subjectIndex >= -1 && index - subjectIndex <= 1">
						<view class="cu-bar bg-white solid-bottom">
							<view class="action text-black">
								<text class="text-red">{{index+1}}.</text>
								<text>	{{ subject.question.title }}</text>
							
							</view>
						</view>
						<view>
							<radio-group  class="block" @change="RadioboxChange" v-if="subject.question.typeid === 1">
								<view class="cu-form-group" v-for="option in subject.results"  :style="{  'margin-bottom': option.text.length+'px' }">
									<radio disabled :value="option.id + ''" :checked="subject.userAnswer.indexOf(option.id) > -1 ? true : false"></radio>
									<view class="title text-black textcontent" style="color: red;" v-if="option.rightr==1">{{ option.text }}</view>
									<view class="title text-black textcontent"v-else>{{ option.text }}</view>
								</view>
							</radio-group>

							<checkbox-group class="block" @change="CheckboxChange" v-else-if="subject.question.typeid === 2">
								<view  class="cu-form-group" v-for="(option,index) in subject.results"   style="margin-bottom: 10px;">
									<checkbox disabled
										:value="option.id + ''"
										:class="subject.userAnswer.indexOf(option.id) > -1 ? 'checked' : ''"
										:checked="subject.userAnswer.indexOf(option.id) > -1 ? true : false"
									></checkbox>
										<view class="title text-black textcontent" style="color: red;" v-if="option.rightr==1">{{ option.text }}</view>
									<view class="title text-black textcontent"v-else>{{ option.text }}</view>
								</view>
							</checkbox-group>

							<radio-group class="block" @change="RadioboxChangePd" v-if="subject.question.typeid === 4">
								<view class="cu-form-group" v-for="option in subject.results"  :style="{  'margin-bottom': option.text.length+'px' }">
									<radio disabled :value="option.id + ''" :checked="subject.userAnswer.indexOf(option.id) > -1 ? true : false"></radio>
										<view class="title text-black textcontent" style="color: red;" v-if="option.rightr==1">{{ option.text }}</view>
									<view class="title text-black textcontent"v-else>{{ option.text }}</view>
								</view>
							</radio-group>
							<!-- 	<view v-else-if="subject.type === 4">
								<view class="cu-form-group solid-bottom">
									<view class="title  text-black">答：</view>
									<input placeholder="文本输入框" name="input" @blur="textInput" />
								</view>
							</view> -->
							<view v-else-if="subject.question.typeid === 3">
								<view class="cu-bar cu-bar-title bg-white margin-top"><view class="action  text-black">答：</view></view>
								<view class="cu-form-group solid margin">
									<textarea disabled :value="subject.userAnswer" maxlength="-1" @blur="textInput" placeholder="多行文本输入框"></textarea>
								</view>
							</view>
						</view>

						
					</view>
				</swiper-item>
			</swiper>
		</form>
		<view id="foot-box" class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="MoveSubject(-1)">
				<view class="cuIcon-cu-image"><text class="lg cuIcon-back text-gray"></text></view>
				<view class="text-gray">上一题</view>
			</view>
			<view class="action" @click="MoveSubject(1)">
				<view class="cuIcon-cu-image"><text class="lg text-gray cuIcon-right"></text></view>
				<view class="text-gray">下一题</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userFavor: false, //是否已收藏
			currentType: 0, //当前题型
			subjectIndex: 0, //跳转索引
			autoShowAnswer: false, //答错是否显答案
			autoRadioNext: true, //判断题、单项题，自动移下一题
			swiperHeight: '800px', //
			title: '',
			subjectList: [],
			modalCard: null, //显示答题卡
			modalError: null, //纠错卡
			errorList: ['题目不完整', '答案不正确', '含有错别字', '图片不存在', '解析不完整', '其他错误'],
			examdata: {},
			postdata: {
				actiontype: 0,
				dxquestions: {},
				userpaper: {},
				dxxquestions: {},
				pdquestions: {},
				tkquestions: {}
			},
			examinfo: {},
			hastime: {
				etime: 0,
				hour: 0,
				minute: 0,
				second: 0
			},
			timeout: 0,
			dtjdbfb: 0
		};
	},computed:{
		//计算选项之间的间隔
	},
	onReady() {
		var tempHeight = 800;
		var _me = this;
		uni.getSystemInfo({
			//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高
			success: function(res) {
				// console.log(res.model);
				// console.log(res.pixelRatio);
				// console.log(res.windowWidth);
				// console.log(res.windowHeight);
				// //这里是手机屏幕高度
				// console.log(res.language);
				// console.log(res.version);
				// console.log(res.platform);
				tempHeight = res.windowHeight;
				console.log('屏幕可用高度 ' + tempHeight);

				uni.createSelectorQuery()
					.select('#top-box')
					.fields(
						{
							size: true,
							scrollOffset: true
						},
						data => {
							tempHeight -= data.height;
							console.log('减掉顶部后的高度 ' + tempHeight);

							uni.createSelectorQuery()
								.select('#foot-box')
								.fields(
									{
										size: true,
										scrollOffset: true
									},
									data => {
										tempHeight -= data.height;
										console.log('减掉底部后的高度 ' + tempHeight);
										_me.swiperHeight = tempHeight + 'px';
										console.log('滑屏最后高度 ' + _me.swiperHeight);
									}
								)
								.exec();
						}
					)
					.exec();
			}
		});
		if (this.examinfo) {
			this.setPaper();
		}
	},
	onLoad(examinfo) {
		this.examinfo = examinfo;
	},destroyed(){
		console.log('destroyed')
		clearTimeout(this.timeout);
		window.clearTimeout(this.timeout);
	},
	methods: {
		createModel: function(json, prop, val) {
			// 如果 val 被忽略
			if (typeof val === 'undefined') {
				// 删除属性
				delete json[prop];
			} else {
				// 添加 或 修改
				json[prop] = val;
			}
		},
		setTimer() {},
		setPaper: function() {
			var data = {
				examid: this.examinfo.examid,
				workno: this.examinfo.workno,
				userpaperid:this.examinfo.userpaperid
			};
			data = encodeURI(JSON.stringify(data));
			uni.request({
				url: '/examonline/mobile/getBackView',
				data: {
					data
				},
				dataType: 'GET',
				success: res => {
					let resdata = JSON.parse(res.data);
					this.examdata = resdata.data;
					this.subjectList = this.examdata.list;
					this.currentType = this.subjectList[0].question.typeid;
					uni.setNavigationBarTitle({
						title: this.title
					});
					//添加用户显示答案字段
					for (var i = 0; i < this.subjectList.length; i++) {
						this.$set(this.subjectList[i], 'showAnswer', false);
					}
					//upqs有数据即可判断是保存过的试卷
					let upqs = this.examdata.list;
					if (upqs != undefined && upqs != null) {
						for (var l = 0; l < upqs.length; l++) {
								if (upqs[l].question.typeid == 1) {
									var prop = 'rodio' + upqs[l].question.id;
									var val = upqs[l].userAnswer;
									//填写已经保存过的答案
									this.postdata.dxquestions[prop] = val;
								} else if (upqs[l].question.typeid == 2) {
									var prop = 'check' + upqs[l].question.id;
									var results = upqs[l].userAnswer;
									this.postdata.dxxquestions[prop] = this.haveCheckVaules(results);
								} else if (upqs[l].question.typeid == 3) {
									var prop = 'input' + upqs[l].question.id;
									var input = upqs[l].userAnswer;
									this.postdata.tkquestions[prop] = input;
								} else if (upqs[l].question.typeid == 4) {
									var prop = 'hasboolean' + upqs[l].question.id;
									var pdboolean = upqs[l].userAnswer;
									this.postdata.pdquestions[prop] = pdboolean;
								}
							
						}
					}
					this.hastime.etime=new Date(new Date().getTime() + 1 * this.examdata.exam.time * 60 * 1000)
					let userpaper = this.examdata.userpaper;
					if (userpaper != undefined && userpaper != null) {
						//进度条
						this.dtjdbfb = userpaper.finish;
						//更新剩余时间
						var lefttime = userpaper.lefttime;
						if (lefttime != undefined && lefttime != null && lefttime > 0) {
							this.hastime.etime = new Date(new Date().getTime() + lefttime);
						}
					}
				}
			});
		},
		isEmty: function(val) {
			if (val != undefined && val != null && val != '') {
				return false;
			}
			return true;
		},haveCheckVaules(vaule) {
			if(vaule!=null&&vaule!=""&&vaule!=undefined){
			return JSON.parse(vaule);
			}
	return [];
	},
		editExam: function(code) {},
		saveconfirm(code) {},
		showCardModal: function(e) {
			this.modalCard = e.currentTarget.dataset.target;
		},
		hideCardModal: function(e) {
			this.modalCard = null;
		},
		showErrorModal: function(e) {
			this.modalError = e.currentTarget.dataset.target;
		},
		hideErrorModal: function(e) {
			this.modalError = null;
		},
		SwiperChange: function(e) {
			//滑动事件
			let index = e.target.current;
			if (index != undefined) {
				this.subjectIndex = index;
				this.currentType = this.subjectList[index].question.typeid;
				this.userFavor = this.subjectList[index].userFavor;
			}
		},

		RadioboxChange: function(e) {
			//单选选中
			var items = this.subjectList[this.subjectIndex].results;
			var values = e.detail.value;
			this.subjectList[this.subjectIndex].userAnswer = values;
			var prop = 'rodio' + this.subjectList[this.subjectIndex].question.id;
			this.createModel(this.postdata.dxquestions, prop, values);
			/* if (this.autoRadioNext && this.subjectIndex < this.subjectList.length - 1) {
				this.subjectIndex += 1;
			} */
		},
		RadioboxChangePd: function(e) {
			//单选选中
			var items = this.subjectList[this.subjectIndex].results;
			var values = e.detail.value;
			this.subjectList[this.subjectIndex].userAnswer = values;
			var prop = 'hasboolean' + this.subjectList[this.subjectIndex].question.id;
			this.createModel(this.postdata.pdquestions, prop, values);
			/* if (this.autoRadioNext && this.subjectIndex < this.subjectList.length - 1) {
				this.subjectIndex += 1;
			} */
		
		},
		CheckboxChange: function(e) {
			//复选选中
			var items = this.subjectList[this.subjectIndex].results;
			var values = e.detail.value;
			this.subjectList[this.subjectIndex].userAnswer = '';
			this.subjectList[this.subjectIndex].checkAnswer = values;
			var prop = 'check' + this.subjectList[this.subjectIndex].question.id;
			console.log(values);
			this.createModel(this.postdata.dxxquestions, prop, values);
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
					if (items[i].id == values[j]) {
						this.subjectList[this.subjectIndex].userAnswer += items[i].id;
						break;
					}
				}
			}
		},
		textInput: function(e) {
			//填空题
			this.subjectList[this.subjectIndex].userAnswer = e.detail.value;
			var prop = 'input' + this.subjectList[this.subjectIndex].question.id;
			this.createModel(this.postdata.tkquestions, prop, e.detail.value);
		},
		ShowAnswerChange: function(e) {
			//显示答案

			if (this.subjectList[this.subjectIndex].showAnswer) {
				this.subjectList[this.subjectIndex].showAnswer = false;
			} else {
				this.subjectList[this.subjectIndex].showAnswer = true;
			}
		},

		FavorSubject: function(e) {
			//收藏题

			if (this.userFavor) {
				this.userFavor = false;
				this.subjectList[this.subjectIndex].userFavor = false;
			} else {
				this.userFavor = true;
				this.subjectList[this.subjectIndex].userFavor = true;
			}
		},

		MoveSubject: function(e) {
			//上一题、下一题

			if (e === -1 && this.subjectIndex != 0) {
				this.subjectIndex -= 1;
			}
			if (e === 1 && this.subjectIndex < this.subjectList.length - 1) {
				this.subjectIndex += 1;
			}
		},

		AppointedSubject: function(e) {
			//题卡指定

			this.modalCard = null;
			this.subjectIndex = e;
		},

		SubmitError: function(e) {
			//提交纠错

			this.modalError = null;
		}
	},
	distroyed() {
		clearTimeout(this.timeout);
	}
};
</script>

<style>
@import '../../colorui/animation.css';
page {
	background-color: #ffffff;
}

.cu-form-group {
	justify-content: flex-start;
}

.cu-form-group .title {
	padding-left: 30upx;
	padding-right: 0upx;
	
}


.textcontent {  
    width: 100%;  
    height: auto;  
    word-wrap:break-word;  
    word-break:break-all;  
    overflow: hidden;  
} 

.cu-form-group + .cu-form-group {
	border-top: none;
}

.cu-bar-title {
	min-height: 50upx;
}

.cu-list.menu > .cu-item-error {
	justify-content: flex-start;
}
</style>
